<template>
  <view>
    <view class="post-item" v-if="detail">
      <view class="item-header">
        <u-image width="40" height="40" :src="baseUrl + detail.userAvatar" shape="circle"></u-image>
        <view class="right">
          <view>
            <view class="username">{{ detail.userName }}</view>
            <view class="time">{{ detail.createTime ? formatPostTime(detail.createTime) : '' }}</view>
          </view>
          <view>
            <view class="like">
              <view class="iconfont_v2 icon-dianzan1 icon"></view>
            </view>
          </view>
        </view>
      </view>
      <view class="item-content">
        <view class="txt">{{ detail.content }}</view>
        <view class="img-wrapper" v-if="detail.imgs">
          <u-image v-for="(img,index) of detail.imgs.split(',')" :key="index" width="100" height="100" mode="aspectFill" :src="baseUrl + img"></u-image>
        </view>
      </view>
      <view class="item-footer">
        <view class="type">
          <text>#&nbsp;{{ detail.type }}</text>
        </view>
        <view class="right">
          <view class="like">
            <view class="iconfont_v2 icon-shoucang icon"></view>
            <text class="num">收藏</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {onLoad} from "@dcloudio/uni-app";

import {formatPostTime} from "@/utils/common";
import {ref} from "vue";
const detail = ref({})
import config from "@/config";
import {getPost} from "@/api/post";
const baseUrl = ref(config.baseUrl)

const getDetail = (id: any) => {
  getPost({id})
      .then(res => {
        console.log('getDetail ', res.data)
        detail.value = res.data
      })
}
onLoad((options) => {
  if (options) {
    console.log('options ', options.id)
    getDetail(options.id)
  }
})

</script>


<style scoped lang="scss">
.post-item {
  margin-bottom: 30rpx;
  border-radius: 20rpx;
  padding: 14px 20rpx;
  background-color: #fff;

  &:last-child {
    margin-bottom: 0;
  }

  .item-header {
    display: flex;
    align-items: center;

    .right {
      width: 680rpx;
      margin-left: 14rpx;
      font-size: 28rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .username {
        color: #444141;
        margin-bottom: 4rpx;
      }

      .time {
        color: #6c6969;
      }

      .like {
        border-radius: 10rpx;
        border: 1px solid #d7d6d6;
        width: 80rpx;
        height: 50rpx;
        line-height: 46rpx;
        text-align: center;
      }
    }
  }

  .item-content {
    margin: 4rpx 0 20rpx 0;
    margin-left: 88rpx;

    .txt {
      margin-bottom: 10rpx;
    }
    .img-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .img {
      }
      .img:nth-child(3n) {
        margin-bottom: 6rpx;

      }
    }
  }

  .item-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    margin-left: 88rpx;

    .type {

      text {
        background-color: #f3f3fd;
        color: #1c498e;
        padding: 8rpx 20rpx;
        border-radius: 18rpx;
        font-size: 22rpx;
        //margin-left: 20rpx;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

    }

    .right {
      display: flex;

      .comment {
        margin-right: 30rpx;
      }
      .icon, .num {
        color: #908c8c;
      }
      .num {
        color: #a19e9e;
        margin-left: 6rpx;
      }
    }

  }
}

</style>
